<template>
    <div class="box">
        <el-card class="box-card">
            <h2>注册</h2>
            <el-form 
                ref="regFormRef"
                :rules="rules" 
                :model="form" 
                label-width="auto"
                @keyup.enter="handleRegister"
               >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" show-password></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: center; margin-bottom: 10px;">
                <button @click="handleRegister">注册</button>
            </div>
            <el-text style="text-align:center; display:block;">已经有账号了？点击
                <el-link type="primary" href="/login" style="vertical-align: baseline;">登录</el-link>
            </el-text>
        </el-card>
    </div>
</template>

<script setup name="Register">
    import { ref, reactive } from 'vue'
    import request from '../../../myvue/src/utils/request';
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    const router = useRouter()

    const regFormRef = ref()
    const form = reactive({
        username: '',
        password: '',
        confirmPassword: ''
    })

    // 正则
    const USERNAME_REG = /^[A-Za-z0-9\u4e00-\u9fa5]{2,10}$/
    const PASSWORD_REG = /^[A-Za-z0-9_]{6,12}$/

    const validateConfirm = (rule, value, callback) => {
        if (value !== form.password) {
            callback(new Error('两次密码输入不一致'))
        } else {
            callback()
        }
    }

    const rules = {
        username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { pattern: USERNAME_REG, message: '用户名只能包含字母、数字、汉字，长度2-10', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { pattern: PASSWORD_REG, message: '密码只能包含字母、数字、下划线，长度6-12', trigger: 'blur' }
        ],
        confirmPassword: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validateConfirm, trigger: 'blur' }
        ]
    }

    function handleRegister() {
        regFormRef.value.validate(valid => {
            if (!valid) return
            let api = '/user/register'
            request({
                url: api,
                method: 'post',
                data: {
                    id: Math.floor(Math.random()*1000000),
                    username: form.username,
                    password: form.password
                }
            }).then(res => {
                if (res.code === 200) {
                    ElMessage.success('成功：' + res.message)
                    router.replace('/login')
                } else {
                    ElMessage.error('失败：' + res.message)
                }
            }).catch(err => {
                ElMessage.error('失败：' + err.message || '未知错误')
            })
        })
    }
</script>

<style scoped>
.box {
    width: 100vw;
    height: 100vh;
    background-image: url('../../public/login.jpg');
    background-repeat: no-repeat;
    overflow: hidden;
}
.box-card {
    width: 400px;
    margin: 0 auto;
    padding: 10;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
h2 {
    text-align: center;
}
button {
    background-color: #409eff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 60%;
    margin: 0px auto;
}
button:hover {
    background-color: #66b1ff;
}
button:active {
    background-color: #3a8ee6;
}
</style>